<template>
  <div>
    <t-form
      ref="form"
      colon
      reset-type="initial"
      :rules="FORM_RULES"
      :data="formData"
      label-align="right"
      label-width="130px"
      @reset="onReset"
      @submit="onSubmit"
    >
      
      <t-form-item :label="$t('sys.notice.label.from.type')" name="jobGroup">
        <SelectDict
          :dictType="SYS_NOTICE_TYPE"
          :placeholderName="$t('sys.notice.label.from.pl.type')"
          v-model:value="formData.type"
        ></SelectDict>
      </t-form-item>
      <t-form-item :label="$t('sys.notice.label.target')" name="target">
        <SelectDict
          :dictType="SYS_NOTICE_TARGET"
          :placeholderName="$t('sys.notice.label.pl.target')"
          v-model:value="formData.target"
        ></SelectDict>
      </t-form-item>
      <t-form-item :label="$t('sys.notice.label.from.title')" name="title">
          <t-input v-model="formData.title" :placeholder="$t('sys.notice.label.from.pl.title')"></t-input>
      </t-form-item>
      <t-form-item :label="$t('sys.notice.label.expire')" name="status">
        <t-date-picker v-model="formData.expire" clearable value-type="time-stamp"/>
      </t-form-item>
      <t-form-item :label="$t('sys.notice.label.status')" name="status">
        <SelectDict
          :dictType="SYS_NOTICE_STATUS"
          :placeholderName="$t('sys.notice.label.from.pl.status')"
          v-model:value="formData.status"
        ></SelectDict>
      </t-form-item>
      <t-form-item :label="$t('sys.notice.label.content')" name="content">
          <div style="z-index: 100000;">
            <Toolbar
              :editor="editorRef"
              :defaultConfig="toolbarConfig"
              mode="default"
            />
          <Editor
              :defaultConfig="editorConfig"
              v-model="formData.content"
              mode="default"
              @onCreated="handleCreated"
              style="height: 200px; overflow-y: hidden"
            />
          </div>
        <!-- <t-input v-model="formData.title" :placeholder="$t('monitor.task.fromTitle.pl.invokeTarget')"></t-input> -->
      </t-form-item>
      <t-form-item>
        <t-space size="small">
          <t-button theme="primary" type="submit" :loading="loading">{{ $t('common.button.submit') }}</t-button>
          <t-button theme="default" variant="base" type="reset" :loading="loading">{{
            $t('common.button.reset1')
          }}</t-button>
        </t-space>
      </t-form-item>
    </t-form>
  </div>
</template>
<script setup lang="tsx">
import { FormRules, MessagePlugin, SubmitContext } from 'tdesign-vue-next';
import { onMounted, ref,shallowRef } from 'vue';
import SelectDict from '@/components/dict/SelectDict.vue';
import { DictData, DictType } from '@/api/system/dict/types';
import { ResultEnum } from '@/enums/httpEnum';
import i18n from '@/i18n';
import { useDictStore } from '@/store';
import { Notice } from '@/api/system/notice/types';
import { addNotice, noticeInfo, updateNotice } from '@/api/system/notice';
import { SYS_NOTICE_TYPE, SYS_JOB_CONCURRENT, SYS_JOB_MISFIRE_POLICY,SYS_NOTICE_TARGET,SYS_NOTICE_STATUS } from '@/constants/dictTypes';
import { Toolbar,Editor } from '@wangeditor/editor-for-vue';
import { IToolbarConfig,IEditorConfig } from '@wangeditor/editor';
import { DomEditor } from '@wangeditor/editor'
import '@wangeditor/editor/dist/css/style.css'
const emit = defineEmits(['submit-hook']);
const FORM_RULES = ref<FormRules>({
  jobName: [{ required: true, message: i18n.global.t('dict.label.pl.dictName'), trigger: 'blur' }],
  dictType: [{ required: true, message: i18n.global.t('dict.label.pl.dictType'), trigger: 'blur' }],
});
// 编辑器实例，必须用 shallowRef，重要！
const editorRef = shallowRef();
const editorConfig:Partial<IEditorConfig> = {
  placeholder: i18n.global.t('monitor.task.fromTitle.pl.invokeTarget'),
  customAlert: undefined,
  scroll: false,
  readOnly: false,
  autoFocus: false
};
const toolbarConfig:Partial<IToolbarConfig>= {
  excludeKeys:[
    'image',
    'video'
  ]
}
const handleCreated = (editor: any) => { "{{{ '_}}}"
  // 记录 editor 实例，重要！
  editorRef.value = editor 
}

// 表单对象
const formData = ref<Notice>({
  id:'',
  title: '',
  type: 0,
  target: 0,
  content: '',
  status: 0,
  expire: undefined,
  remark: ''
});

// 记录重置表单数据
const resetValue = ref<Notice>();
const taskFromId = ref('');
const loading = ref(false);
/**
 * 重置表单
 */
const onReset = () => {
  loading.value = true;
  if (taskFromId.value) {
    initFromData(taskFromId.value);
  }
  loading.value = false;
};


/**
 * 初始化表单
 */
const initFromData = async (id: string) => {
  if (!id) {
    formData.value = {
      id:'',
      title: '',
      type: 0,
      target: 0,
      content: '',
      status: 0,
      expire: undefined,
      remark: ''
    };
    taskFromId.value = undefined;
    return;
  }
  taskFromId.value = id;
  const { code, result } = await noticeInfo(id);
  if (ResultEnum.SUCCESS === code) {
    formData.value = result;
    resetValue.value = result;
  }
};

/**
 * 表单提交事件
 * @param param0 表单验证
 */
const onSubmit = async ({ validateResult }: SubmitContext<DictType>) => {
  if (validateResult === true) {
    loading.value = true;
    const api = formData.value.id ? updateNotice : addNotice;
    const res = await api(formData.value);
    if (res.code === ResultEnum.SUCCESS) {
      MessagePlugin.success(i18n.global.t('common.message.submitSuccess'));
      emit('submit-hook');
    } else {
      MessagePlugin.error(res.message);
    }
    loading.value = false;
  }
};

onMounted(async () => {
});

defineExpose({
  initFromData,
});
</script>

<style lang="less" scoped>
.treeBox {
  border: 1px solid #ddd;
  overflow: auto;
  height: 300px;
  width: 100%;
}
</style>
